// @ts-nocheck
const modalType = {
	SUCCESS: 'S',
	WARNING: 'W',
	ERROR: 'E',
}
const classNameType = {
	success: 'success',
	warning: 'warning',
	error: 'error',
}

;(function () {
	const btns = document.querySelector('.btns')
	const title = document.querySelector('.modal header ')

	function init() {
		bindEvent()
	}
	init()

	function bindEvent() {
		btns.addEventListener('click', handlerBtnClick, false)
	}

	function handlerBtnClick(e) {
		const tar = e.target
		const tarName = tar.tagName.toLowerCase()
		if (tarName === 'button') {
			const status = tar.dataset.status
			// 普通实现
			// changeState(status)

			// 工厂模式
			Factory.create('这是一条消息提示', status)
		}
	}

	function changeState(status) {
		let className = 'modal '
		switch (status) {
			case modalType.SUCCESS:
				className += ' ' + classNameType.success
				break
			case modalType.WARNING:
				className += ' ' + classNameType.warning
				break
			case modalType.ERROR:
				className += ' ' + classNameType.error
				break
			default:
				break
		}
		title.className += className
	}
})()

class Modal {
	constructor(status) {
		this.status = status
	}
	get className() {
		let className = 'modal '
		switch (this.status) {
			case modalType.SUCCESS:
				className += ' ' + classNameType.success
				break
			case modalType.WARNING:
				className += ' ' + classNameType.warning
				break
			case modalType.ERROR:
				className += ' ' + classNameType.error
				break
			default:
				break
		}
		return className
	}
	static checkStatusIsExIst(modalType, status) {
		for (const key in modalType) {
			if (Object.hasOwnProperty.call(modalType, key)) {
				if (status === modalType[key]) return true
			}
		}
		return false
	}
}

class Success extends Modal {
	constructor(title) {
		super(modalType.SUCCESS)
		this.title = '成功：' + title
	}
}
class Warning extends Modal {
	constructor(title) {
		super(modalType.WARNING)
		this.title = '警告：' + title
	}
}
class Errors extends Modal {
	constructor(title) {
		super(modalType.ERROR)
		this.title = '失败：' + title
	}
}

class Factory {
	constructor(dom) {
		this.dom = dom
	}
	static create(title, status) {
		const isStatus = Modal.checkStatusIsExIst(modalType, status)
		if (!isStatus) {
			throw new Error(' Type is not support ')
		}

		const dom = this.dom
		let modal = null

		switch (status) {
			case modalType.SUCCESS:
				modal = new Success(title)
				break
			case modalType.WARNING:
				modal = new Warning(title)
				break
			case modalType.ERROR:
				modal = new Errors(title)
				break
			default:
				break
		}
		document.querySelector('header').innerText = modal.title
		document.querySelector('header').className = modal.className
	}
}
